import React from "react"
import { Box, Text, Tab, Tabs, TabList, TabPanel, TabPanels, Flex } from "@chakra-ui/core"
import SignUp from "./SignUp"
import SignIn from "./SignIn"
import Login from "./Login"

export default function Form () {
    return <Box w="400px" mx="auto" bgColor="white" boxShadow="lg" borderRadius="lg" p={12}>
        <Tabs>
            <TabList border="none" mb="50px">
                <Flex justify="center" w="100%" align="center">
                    {/* 登录选项 */}
                    <Tab 
                        fontWeight="700" 
                        color="#969696" 
                        fontSize="18px" 
                        colorScheme="orange"
                        _focus={{boxShadow: 'none'}} 
                        _hover={{borderBottom: '2px solid #c53030'}}
                    >登录</Tab>
                    <Text fontWeight="700" color="#969696" fontSize="18px" px="10px">·</Text>
                    {/* 注册选项 */}
                    <Tab 
                        fontWeight="700" 
                        color="#969696" 
                        fontSize="18px" 
                        colorScheme="orange" 
                        _focus={{boxShadow: 'none'}} 
                        _hover={{borderBottom: '2px solid #c53030'}}
                    >注册</Tab>
                </Flex>
            </TabList>
            <TabPanels>
                {/* 登录选项显示的内容 */}
                <TabPanel p={0}>
                    <SignIn />
                    <Login type="signIn" />
                </TabPanel>
                {/* 注册选项显示的内容 */}
                <TabPanel p={0}>
                    <SignUp />
                    <Login type="signUp" />
                </TabPanel>
            </TabPanels>
        </Tabs>
    </Box>
}